
<template>
    <h1>属性绑定</h1>
    <!--错误写法：双大括号不能在 HTML attributes 中使用-->
    <div class="{{ msg }}">{{ "测试" }}</div>

    <!--v-bind正常写法-->
    <div v-bind:class=msg>{{ "测试1" }}</div>

    <!--v-bind简写-->
    <div :class=msg>{{ "测试2" }}</div>

    <!--dynamicId与"dynamicclass"加不加双引号都行-->
    <div v-bind:id=dynamicId v-bind:class="dynamicclass" >测试3</div>

    <!--v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。-->
    <div v-bind:title="dynamictitle" >测试4</div>

    <!--布尔型 Attribute，当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略移除。-->
    <button :disabled="isButtonDisabled">Button</button>

    <!--动态绑定多个值:通过不带参数的 v-bind，可以将它们绑定到单个元素上-->
    <div v-bind=object>测试5</div>
</template>

<script>
export default{
    data(){
        return{
            msg:"hello",
            dynamicId:"appid",
            dynamicclass:'appclass',
            dynamictitle:null,
            isButtonDisabled:"",//true
            object:{
                id: 'container',
                class: 'wrapper',
                style: 'background-color:green'
            }
        }
    }
}
</script>

<style>
.appclass{
    color:blue;
}
</style>